﻿@{
    ViewBag.Title = "Administrate Users";
}
@model Host.Models.RegisterModel
@using System.Web.Script.Serialization
<h2>Administrate System Users</h2>
<p>This section is to allow you to remove users from the system. To register a user click @Html.ActionLink("Here", "Register", "Account") .</p>
<div>
    <form  data-bind="submit: save">
        <div style="border: 1px solid #000000; width:450px;">
        <table style="width:450px;" >
            <thead >
                <tr >
                    <th>User</th>
                    <th>E-Mail</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind='template: { name: "giftRowTemplate", foreach: RegisterModel }'></tbody>
        </table>
        </div>
      
    </form>
    <script type="text/html" id="giftRowTemplate">
    <tr>
        <td style="background-color:#fff;"><span data-bind="text: UserName" ></span></td>
        <td style="background-color:#fff;"><span data-bind="text: Email" ></span></td>
        <td style="background-color:#fff;"><div class="deleteButton"  data-bind=" click: function() { viewModel.removeUser($data) }" >Delete</div></td>
    </tr>
</script>

<script type="text/javascript" >
    $(function () {

    });

    var viewModel = {
        RegisterModel: ko.observableArray([
        { UserName: "Tall Hat", Email: "39.95" },
        { UserName: "Long Cloak", Email: "120.00" }
    ]),

        addGift: function () {
            this.RegisterModel.push({ UserName: "", Email: "" });
        },

        removeUser: function (gift) {
            var u = ko.toJSON(gift);
            var a = $.parseJSON(u);
            this.RegisterModel.remove(gift);
            $.ajax({
                url: '/Account/RemoveUser', type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(a),
                success: function (data) {
                    
                }
            });
        },

        save: function (form) {
            var d = ko.toJSON(this.RegisterModel);
            var dd = $.parseJSON(this.RegisterModel);
            var jsonData = ko.toJSON(ko.utils.stringifyJson(this.RegisterModel));
            var x = ko.utils.stringifyJson(this.RegisterModel);
            var  u = ko.toJSON(viewModel.RegisterModel);
            var a = $.parseJSON(u);
           
            $.ajax({
                url: '/Account/UserAdmin', type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(a),
                success: function (data) {

                }
            });

        }
    };

    ko.dependentObservable(function () {
                $.ajax({
            url: '/Account/GetUsers', type: "GET",
            dataType: 'json',
            data: {},
            contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    viewModel.RegisterModel(data);
                    }
                });
            }, viewModel);
        ko.applyBindings(viewModel);
        $("form").validate({ submitHandler: function () { viewModel.save() } });
</script>
</div>